import React, { useState, useEffect } from 'react'
import axios from 'axios';
import { LeftOutline } from 'antd-mobile-icons'
import './index.scss';
import { Link } from 'react-router-dom';
import abc1 from '../../img/gift.png'
import abc2 from '../../img/two-member.png'
import abc3 from '../../img/new_shopCart1.png'
import { useParams } from 'react-router-dom';
import { useNavigate } from "react-router-dom";
const ListCom = (props) => {
    const [list, setList] = useState([]);
    const [end, setEnd] = useState(false);
    let type = true;
    let page = 1
    const params = useParams();
    const navigate = useNavigate();
    useEffect(() => {
        // let searchKey = props.match.params.searchstr;
        moreData();
        //触底加载
        onScroll();
        return () => {
            window.onscroll = undefined;
        }
    }, [])
    //数据假设只有10页,11页
    const onScroll = () => {
        //绑定滚动事件
        window.onscroll = () => {
            //获取滚动距离
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //窗口的高度
            let windowHeight = document.documentElement.clientHeight;
            //滚动的高度
            let scrollHeight = document.body.scrollHeight;
            // console.log(`触底,scrollTop:${scrollTop},windowHeight:${windowHeight},scrollHeight:${scrollHeight}`);
            if (scrollHeight - scrollTop <= windowHeight) {
                console.log("触底了");
                if (type) {
                    page++;
                    moreData();
                }
                type = false
            }
        }
    }
    const moreData = () => {
        if (!end) {
            let searchKey = params.searchstr;
            axios.post('https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/commoditySearch', { "memberKey": "", "searchKey": searchKey, "isWholeSale": 0, "channelId": "C06022632001", "page": page }).then(res => {
                console.log(res);
                let data = res.data.data.templateList;
                if (data.length !== 0) {

                    setList([...list, ...data])

                    type = true;
                } else {
                    setEnd(true)
                }
            })
        }
    }

    const goBack = () => {
        navigate(-1);
    }


    return (
        <div className="list_con">
            <div className="list_title"> <LeftOutline onClick={goBack} /> 列表页面</div>
            <ul>
                {
                    list.map(i => <div className='item' key={i.ptKey}>
                        <Link to={"/item/" + i.ptKey}>
                            <img src={i.listImages} alt={i.name} />
                            <div className="tuijian_text">
                                <img src={abc1} alt={2} className="tuijiantu1" />
                                <span>{i.name}</span>
                                <span>{i.displayName}</span>
                                <div className="tuijian_neirong">
                                    <div>
                                        <span>￥{i.retailPrice}</span>
                                        <span>
                                            ￥{i.supplyPrice}
                                            <img src={abc2} alt={2} />
                                        </span>
                                        <img src={abc3} alt={2} className="tuijiantu2" />
                                    </div>
                                </div>
                            </div>
                        </Link>
                    </div>)
                }
            </ul>
            {
                end ? <div>您的数据都加载完了，请不要再拉了...</div> : ""
            }

        </div>
    )

}
export default ListCom